<template>
  <el-dialog
      :title="title"
      :visible="visible"
      width="70%"
      :show-close="true"
      @close="close"
      :close-on-click-modal="false"
  >
    <el-form
        :model="form"
        ref="formRef"
        label-width="120px"
        class="edit-form"
    >
      <!-- 基本信息 -->
      <el-divider content-position="left">基本信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户姓名" prop="cusName">
            {{ form.cusName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户手机号" prop="cusPhone">
              {{ form.cusPhone }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户类型" prop="customerType">
            <el-select v-model="form.customerType" placeholder="请选择客户类型" style="width: 100%">
              <el-option label="个人" value="PERSONAL"/>
              <el-option label="企业" value="ENTERPRISE"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户标签" prop="tag">
            <el-select v-model="form.tag" placeholder="请选择客户标签" style="width: 100%">
              <el-option label="客户" value="CUSTOMER"/>
              <el-option label="代理商" value="AGENT"/>
              <el-option label="推荐人" value="REFEREE"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="客户备注" prop="introduction">
            <el-input
                v-model="form.introduction"
                type="textarea"
                :rows="4"
                placeholder="请输入客户备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 交易设置 -->
      <el-divider content-position="left">交易设置</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最大交易克数" prop="maxTradeLimit">
            <el-input-number
                v-model="form.maxTradeLimit"
                :min="0"
                :precision="2"
                placeholder="请输入最大交易克数"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否允许交易" prop="allowTrade">
            <el-radio-group v-model="form.allowTrade">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否内部人员" prop="isAgent">
            <el-radio-group v-model="form.isAgent">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户风险等级" prop="riskGrade">
            <el-select v-model="form.riskGrade" placeholder="请选择风险等级" style="width: 100%">
              <el-option label="低风险" value="LOW"/>
              <el-option label="中风险" value="MEDIUM"/>
              <el-option label="高风险" value="HIGH"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="客户等级" prop="grade">
            <el-select v-model="form.grade" placeholder="请选择客户等级" style="width: 100%">
              <el-option label="普通客户" value="NORMAL"/>
              <el-option label="VIP客户" value="VIP"/>
              <el-option label="钻石客户" value="DIAMOND"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getCustomerDetail, updateCustomerInfo} from '../api/customer'
import {IMG_URL} from '@/utils/utils'

export default {
  name: 'EditDialog',
  data() {
    return {
      IMG_URL,
      visible: false,
      loading: false,
      title: '编辑客户信息',
      form: {
        cusId: '',
        customerType: '',
        tag: '',
        introduction: '',
        maxTradeLimit: 0,
        isAgent: 'NO',
        allowTrade: 'YES',
        riskGrade: '',
        grade: ''
      },
    }
  },
  methods: {
    // 打开编辑弹窗
    open(row) {
      this.visible = true
      this.title = '编辑客户信息'
      this.loadCustomerDetail(row)
    },

    // 关闭弹窗
    close() {
      this.visible = false
      this.resetForm()
    },

    // 重置表单
    resetForm() {
      this.$refs.formRef?.resetFields()
      this.form = {
        cusId: '',
        customerType: '',
        tag: '',
        introduction: '',
        maxTradeLimit: 0,
        isAgent: 'NO',
        allowTrade: 'YES',
        riskGrade: '',
        grade: ''
      }
    },

    // 获取客户详情
    async loadCustomerDetail(id) {
      try {
        const res = await getCustomerDetail(id)
        if (res) {
          this.form = {...res}
        }
      } catch (error) {
        console.error('获取客户详情失败:', error)
      }
    },

    // 提交表单
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let params = {
            "cusId": this.form.cusId,
            "customerType": this.form.customerType,
            "tag": this.form.tag,
            "introduction": this.form.introduction,
            "maxTradeLimit": this.form.maxTradeLimit,
            "isAgent": this.form.isAgent,
            "allowTrade": this.form.allowTrade,
            "riskGrade": this.form.riskGrade,
            "grade": this.form.grade
          }
          try {
            await updateCustomerInfo(params)
            this.$message.success('更新成功')
            this.close()
            this.$emit('refresh')
          } catch (error) {
            console.error('更新失败:', error)
          } finally {
            this.loading = false
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.edit-form {
  .el-divider {
    margin: 30px 0 20px 0;

    ::v-deep .el-divider__text {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .el-row {
    margin-bottom: 10px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }
}

.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.id-card-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.id-card-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.id-card-image {
  width: 120px;
  height: 80px;
  display: block;
}

// 响应式设计
@media (max-width: 768px) {
  .edit-form {
    .el-col {
      margin-bottom: 10px;
    }
  }
}
</style>
